<!-- 景点详情页 -->
<template>
    <div class="spots-page">
        <nav-bar :activeComponent="activeComponent"></nav-bar>
        
        <main class="main">
          <!-- 景点信息 -->
          <el-card shadow="always" style="width: 76vw ; margin-top: 20px;">
            <template #header>
              <div class="card-header">
                <!-- 轮播图 -->
              <el-carousel :interval="4000" type="card" height="400px">
                  <el-carousel-item v-for="(img, index) in carouselImages" :key="index">
                    <img :src="img" alt="Image Carousel" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </template>
            <div class="card-content">
              <spots-info :spot="curSpot"  @doSomething="updatespot"></spots-info>
            </div>
          </el-card>

        <!-- 攻略与游记 -->
        <section class="experience">
          <div class="section-header">
             <h2><i class="fas fa-book-open section-icon"></i> 精选外滩攻略</h2>
             <a href="/guides" class="view-all">更多攻略 <i class="fas fa-chevron-right"></i></a>
          </div>
          <spots-strategy></spots-strategy>

          <div class="section-header">
            <h2><i class="fas fa-pen-fancy section-icon"></i> 精选外滩游记</h2>
            <a href="/travelogues" class="view-all">更多游记 <i class="fas fa-chevron-right"></i></a>
          </div>
          <spots-notes></spots-notes>
        </section>

        <!-- 评论区 -->
        <section class="comments">
          <div class="section-header">
            <h2><i class="fas fa-comments section-icon"></i> 外滩的评价</h2>
            <a href="/comments" class="view-all">更多评论 <i class="fas fa-chevron-right"></i></a>
          </div>
          <el-card shadow="always" style="width: 76vw ; margin-top: 20px;">
            <SpotsComments :rating="rating" :total-reviews="totalReviews" :comments="comments" />
          </el-card>
        </section>
        </main>
    </div>
</template>

<script setup>
import NavBar from "@/components/NavBar.vue";
import { ref,onMounted,defineProps ,defineEmits} from "vue";
import SpotsInfo from '@/components/SpotsIntro/SpotsInfo.vue';
import SpotsStrategy from '@/components/spotsExperience/SpotsStrategy.vue';
import SpotsNotes from '@/components/spotsExperience/SpotsNotes.vue';
import SpotsComments from '@/components/SpotsComments.vue';
import {getCityId} from "@/api/spot.js";
import { useRoute } from 'vue-router';
import {readComment} from "@/api/comment.js";
const activeComponent = ref("spots");
const curSpot=ref({});

// 模拟景点评论数据
const route = useRoute();
const spotId = ref(route.query.id || 1021);  
// 存轮播图图片路径的 ref
const carouselImages = ref([
  '/images/1.jpg',
  '/images/2.jpg',
  '/images/3.jpg',
  '/images/4.jpg',
  '/images/5.jpg',
  '/images/6.jpg'
]);
const rating = ref(4.8);
const totalReviews = ref(134994);
const comments = ref([
  {
    avatar: "https://example.com/avatar1.jpg",
    username: "go real",
    rating: 5,
    text: "上海外灘：東方明珠的璀璨華章 沿着黃浦江畔悠然漫步，上海外灘，這片鐫刻着歷史與現代交織印記的濱水長廊，宛如一幅徐徐展開的巨型畫卷，每一寸土地、每一棟建築都散發著令人着迷的魅力，讓人不禁沉醉其中。 外灘的建築無疑是一場萬國建築博覽，哥特式的尖頂直插雲霄，巴洛克風格的裝飾繁複奢華，新古典主義的立柱雄渾大氣，從外灘 1 號的亞細亞大樓，到 33 號的原英國領事館，風格各異的樓宇並肩而立，它們是舊上海“冒險家的樂園”那段歷史的見證者。這些建築建於 19 世紀末 20 世紀初，當時列強割據，各國紛紛在外灘搶佔一席之地，按照本土風格大興土木，本是殖民統治的象徵，如今卻成了上海海納百川城市精神的生動註腳。大樓的外立面，有的鑲嵌着精美的花崗岩石板，歷經風雨侵蝕仍光潔如新；有的裝飾着形態各異的雕塑，古希臘神話人物、歐式花卉造型等，在陽光下投下藝術的剪影，讓人仿若穿越時空，置身歐洲名都。 憑欄遠眺，黃浦江面上舟楫往來，遊船如織，或豪華游輪燈火輝煌，遊客們歡聲笑語，在江上愜意巡遊，飽覽兩岸風光；或貨輪鳴笛遠航，滿載貨物駛向世界各處，延續着上海作為國際航運中心的繁榮。江風拂面，帶來濕潤的氣息，夾雜着對岸陸家嘴金融區的蓬勃朝氣。東方明珠廣播電視塔宛如擎天巨柱，晶瑩剔透，球體璀璨奪目，與旁邊的金茂大廈、上海中心大廈等摩天大樓並肩而立，組成了極具現代感的天際線。白天，它們高聳入雲，展現科技與建築融合的震撼力量；夜晚，燈光亮起，霓虹閃爍，或如繁星點點，或似綵帶飄舞，將上海的夜晚裝點得如夢如幻，訴說著這座城市邁向國際大都市的豪邁步伐。 外灘的歷史人文底蘊同樣深厚。這裏曾是上海開埠后的商業中心，洋行、銀行林立，多少商業傳奇在此誕生，多少財富故事在這裏流傳。陳毅廣場上，人們聚集瞻仰陳毅元帥塑像，緬懷這位為上海發展立下汗馬功勞的偉人，塑像周圍，市民們休閑娛樂，孩童們嬉笑玩耍，洋溢着生活的氣息。每逢重大節日，外灘更是熱鬧非凡，跨年之夜，數十萬市民與遊客匯聚於此，倒計時的歡呼聲響徹夜空，煙花盛放，與江景、樓景相互輝映，共同迎接新的一年，那一刻，外灘凝聚着上海的活力與希望。 外灘，是歷史的沉澱，是現代的勃發，是上海的名片。它用建築、景緻與人文，串起過去與未來，吸引着全球目光，無論何時到訪，都能讓人深深領略這座城市獨有的風姿與魅力，沉醉不知歸路。",
    images: [
      "https://example.com/image1.jpg",
      "https://example.com/image2.jpg",
      "https://example.com/image3.jpg",
    ],
    likes: 0,
    timestamp: "2025年3月8日",
  },
  {
    avatar: "https://example.com/avatar2.jpg",
    username: "Priya",
    rating: 4.5,
    text: "非常棒的体验，夜景很美，值得一游！",
    images: [
      "https://example.com/image4.jpg",
      "https://example.com/image5.jpg",
    ],
    likes: 0,
    timestamp: "2025年3月7日",
  },

]);
const updatespot=()=>{
  getCityId(spotId.value).then((res)=>{
    curSpot.value=res.data;

    rating.value=curSpot.value.score;
    carouselImages.value=curSpot.value.imagePath;
  })
}
const getComment=()=>{
  readComment({status:0,bindId:spotId.value

  }).then((res)=>{

comments.value=res.data;
totalReviews.value=res.data.length;

  })
}
onMounted(()=>{


    updatespot();
    getComment();
 

  

}
)
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.main {
  position: relative; /* 设置元素相对定位 */
  font-family: 'Noto Sans SC', sans-serif; /* 设置字体 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中对齐子元素 */
  align-items: center; /* 垂直居中对齐子元素 */
  flex-direction: column; /* 子元素垂直排列 */
}
.card-header {
  width: 74vw;
}
.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片填充整个容器，避免变形 */
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.experience {
  width: 76vw;
  margin-top: 20px;
}

.comments {
  width: 76vw;
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.section-header h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  color: #0e9aa7;
}

.view-all {
  color: #0e9aa7;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.view-all:hover {
  background-color: rgba(14, 154, 167, 0.1);
  transform: translateX(3px);
}

</style>